<template>
	<view class="venue">
		<view class="tabbar">
			<topBar :barTit="barTit"></topBar>
		</view>

		<!-- 顶部的筛选下拉框 -->
		<view class="root">
			<ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex' @ed='ed'
				@dateChange='dateChange'></ren-dropdown-filter>
		</view>
		<!-- 列表 -->
		<view class="venueList">
			<view class="venueItem" v-for="(item,index) in venueList" :key="index">
				<view class="pic">
					<img :src=item.img alt="">
				</view>
				<view class="cuntent">
					<view class="tit">{{item.tit}}</view>
					<text class="venueType">{{item.type}}</text>
					<view class="address">
						<img src="../../static/images/addrees.png" alt="">
						<text>{{item.address}}</text>
					</view>
				</view>
			</view>
		</view>
		<hans-tabber :list="list" :current="current" style="position:fixed;bottom:0;width:100%;left:0;right:0;"
			@tabChange="tabChange"></hans-tabber>
	</view>
</template>

<script>
	import hansTabber from '../../components/hans-tabbar/hans-tabbar.vue'
	import topBar from '../../components/topNavBar.vue'
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	export default {
		components: {
			hansTabber,
			RenDropdownFilter,
			topBar
		},
		data() {
			return {
				barTit: '人气空间',
				filterData: [
					[{
						text: '全部',
						value: ''
					}, {
						text: '状态1',
						value: 1
					}, {
						text: '状态2',
						value: 2
					}, {
						text: '状态3',
						value: 3
					}],
					[{
						text: '游玩类型',
						value: ''
					}, {
						text: '类型1',
						value: 1
					}, {
						text: '类型2',
						value: 2
					}, {
						text: '类型3',
						value: 3
					}]
				],
				defaultIndex: [0, 0],
				current: 1,
				list: [{
						"text": "首页",
						"iconPath": '../../static/images/index1.png',
						"selectedIconPath": '../../static/images/index.png'
					},
					{
						"text": "场馆",
						"iconPath": '../../static/images/dq.png',
						"selectedIconPath": '../../static/images/dq1.png'
					},
					{
						"text": "",
						"iconPath": '../../static/images/bx.png',
						"selectedIconPath": '../../static/images/bx.png'
					},
					{
						"text": "视频",
						"iconPath": '../../static/images/video.png',
						"selectedIconPath": '../../static/images/video1.png'
					},
					{
						"text": "我的",
						"iconPath": '../../static/images/my.png',
						"selectedIconPath": '../../static/images/my1.png'
					}
				],
				venueList: [{
						img: '../../static/images/cgItem.png',
						tit: '大众剧场',
						type: '剧院',
						address: '开封市龙亭区西郊乡经济开发区五大开大道交叉口西北角'
					},
					{
						img: '../../static/images/msg.png',
						tit: '开封市图书馆',
						type: '市图书馆',
						address: '开封市龙亭区西郊乡经济开发区五大开大道交叉口西北角'
					},
					{
						img: '../../static/images/tsg.png',
						tit: '开封市美术馆',
						type: '美术馆',
						address: '开封市龙亭区西郊乡经济开发区五大开大道交叉口西北角'
					},
					{
						img: '../../static/images/bwg.png',
						tit: '开封博物馆(新馆)',
						type: '博物馆',
						address: '开封市龙亭区西郊乡经济开发区五大开大道交叉口西北角'
					},
					{
						img: '../../static/images/bwg.png',
						tit: '开封博物馆(新馆)',
						type: '博物馆',
						address: '开封市龙亭区西郊乡经济开发区五大开大道交叉口西北角'
					},
					{
						img: '../../static/images/bwg.png',
						tit: '开封博物馆(新馆)',
						type: '博物馆',
						address: '开封市龙亭区西郊乡经济开发区五大开大道交叉口西北角'
					}
				]
			}
		},
		methods: {
			tabChange(index) {
				if (index == 0) {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				} else if (index == 1) {
					uni.redirectTo({
						url: '/pages/venue/venue'
					})
				} else if (index == 2) {
					uni.redirectTo({
						url: '/pages/peopleOrder/peopleOrder'
					})
				} else if (index == 3) {
					uni.redirectTo({
						url: '/pages/videoPage/videoPage'
					})
				} else if (index == 4) {
					uni.redirectTo({
						url: '/pages/mine/mine'
					})
				}
			},
			ed(res) {
				console.log(res)
			},
			dateChange(d) {
				uni.showToast({
					icon: 'none',
					title: d
				})
			}
		}
	}
</script>

<style scoped lang="scss" src="./index.scss">

</style>
